<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>设备详情测试页面</span>
        <el-button type="primary" size="small" @click="goBack" style="float: right;">返回</el-button>
      </div>

      <!-- 标签页 -->
      <el-tabs v-model="activeTab" type="card">
        <!-- 第一页 -->
        <el-tab-pane label="基本信息" name="first">
          <div class="detail-container">
            <!-- 第一行 -->
            <el-row :gutter="20" class="mb10">
              <el-col :span="8">
                <el-form-item label="IT设备编码">
                  <el-input v-model="detailData.deviceCode" disabled placeholder="暂无数据" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="设备类型">
                  <el-input v-model="detailData.typeName" disabled placeholder="暂无数据" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="型号">
                  <el-input v-model="detailData.model" disabled placeholder="暂无数据" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第二行 -->
            <el-row :gutter="20" class="mb10">
              <el-col :span="8">
                <el-form-item label="品牌">
                  <el-input v-model="detailData.brandName" disabled placeholder="暂无数据" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="密级">
                  <el-input :value="detailData.securityId ? '机密' : '无'" disabled placeholder="暂无数据" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="来源">
                  <el-input :value="detailData.sourceId ? '采购' : '无'" disabled placeholder="暂无数据" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第三行 -->
            <el-row :gutter="20" class="mb10">
              <el-col :span="8">
                <el-form-item label="所属部门">
                  <el-input v-model="detailData.deptName" disabled placeholder="暂无数据" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="责任人编号">
                  <el-input v-model="detailData.userId" disabled placeholder="暂无数据" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="责任人姓名">
                  <el-input v-model="detailData.userName" disabled placeholder="暂无数据" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 其他行可以根据需要添加 -->
          </div>
        </el-tab-pane>

        <!-- 第二页 -->
        <el-tab-pane label="扩展信息" name="second">
          <div class="detail-container">
            <!-- 简化的扩展信息显示 -->
            <el-row :gutter="20" class="mb10">
              <el-col :span="8">
                <el-form-item label="设备用途">
                  <el-input v-model="detailData.purposeName" disabled placeholder="暂无数据" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DeviceDetailTest',
  data() {
    return {
      // 直接提供模拟数据，确保页面始终有内容显示
      detailData: {
          deviceCode: 'DEV-2023-0001',
          typeName: '笔记本电脑',
          model: 'ThinkPad X1 Carbon',
          brandName: '联想',
          deptName: '技术部',
          userName: '张三',
          securityId: '1',
          sourceId: '1',
          userId: '1001',
          purposeName: '开发测试',
          watermarkCode: 'WM-2023-0001',
          dictName: '技术部办公室'
        },
      // 活跃标签页
      activeTab: 'first',
      // 设备ID
      deviceId: ''
    }
  },
  created() {
    // 获取设备ID（如果有的话）
    this.deviceId = this.$route.params.deviceId || '测试ID'
    console.log('设备详情测试页面初始化，设备ID:', this.deviceId)
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.detail-container {
  padding: 10px 0;
}
.mb10 {
  margin-bottom: 10px;
}
.el-form-item {
  margin-bottom: 15px;
}
.el-form-item__label {
  font-weight: 500;
  color: #606266;
}
.el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  color: #303133;
}
</style>